﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #myDiv {
            height: 800px;
        }

        #myDiv .img {
            display: inline-block;
            width: 100px;
            margin: 2px;
            padding: 0 0 5px 0px;
        }

        #myDiv .img img {
            cursor: pointer;
        }

        #myDiv .img div {
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-left: 5px;
        }

        #myDiv .img.gtfive {
            background-color: rgba(0, 0, 255, 0.4);
        }
    </style>
    <script src="config.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery.lazyload.min.js"></script>
    <script>
        $(function () {
            $("#Submit").click(function (e) {
                var acvsid = $('#input1').val()
                var faceid = $('#input2').val()
                var serverIP = caijingdaxueip;                                    //要访问的Ip
                if (acvsid && faceid) {
                    $.ajax({
                        url: serverIP + "/acvsFaceFace?acvsid=" + acvsid + "&faceid=" + faceid,
                        type: 'GET',
                        success: function (data) {
                            loadJSON(JSON.parse(data))
                        }
                    })
                }

            });

            //生成结果
            function loadJSON(arcs) {
                for (var i = 0; i < arcs.length; i++) {
                    if (arcs[i].detectFacev2 != null) {

                        if (arcs[i]["detectFacev2"] == 1) {
                            var detectFacev2 = '<div style="background:green;">遮挡:' + arcs[i]["detectFacev2"] + '</div>';
                        } else {
                            var detectFacev2 = '<div style="background:#888\t;">遮挡:' + arcs[i]["detectFacev2"] + '</div>';
                        }
                    } else {
                        var detectFacev2 = '<br>';
                    }

                    if (arcs[i]["x"] != null && Math.abs(arcs[i].x) <= 40 && Math.abs(arcs[i]["y"]) <= 40 && Math.abs(arcs[i]["z"]) <= 40) {
                        var x = '<div style="background:green;">x:' + Number(arcs[i]["x"]).toFixed(2) + '</div>';
                        var y = '<div style="background:green;">y:' + Number(arcs[i]["y"]).toFixed(2) + '</div>';
                        var z = '<div style="background:green;">z:' + Number(arcs[i]["z"]).toFixed(2) + '</div>';
                    } else {
                        var x = (arcs[i]["x"] != null) ? '<div>x:' + Number(arcs[i]["x"]).toFixed(2) + '</div>' : '<br>';
                        var y = (arcs[i]["y"] != null) ? '<div>y:' + Number(arcs[i]["y"]).toFixed(2) + '</div>' : '<br>';
                        var z = (arcs[i]["z"] != null) ? '<div>z:' + Number(arcs[i]["z"]).toFixed(2) + '</div>' : '<br>';
                    }

                    var detectFace = (arcs[i]["detectFace"] != null) ? '<div title="' + arcs[i]["detectFace"] + '">角度:' + arcs[i]["detectFace"] + '</div>' : '<br>';

                    if (arcs[i]["detectCount"] != null && arcs[i]["detectCount"] > 1) {
                        var faceCount = (arcs[i]["detectCount"] != null) ? '<div style="background:red;">数量:' + arcs[i]["detectCount"] + '</div>' : '<br>';
                    } else {
                        var faceCount = (arcs[i]["detectCount"] != null) ? '<div style="background:green;">数量:' + arcs[i]["detectCount"] + '</div>' : '<br>';
                    }

                    var faceid = (arcs[i]["face_image_id"] != null) ? '<div>' + arcs[i]["face_image_id"] + '</div>' : '<br>';


                    var $html = $(" <div class='img'>\
                        <img class = 'caijingrenxiang' height='100' width='100' data-id = '" + arcs[i]["face_image_id"] + "' data-original='" + arcs[i]["face_image_uri"] + "'> \
                        " + faceid + "\
                        " + faceCount + "\
                        " + detectFacev2 + "\
                        " + detectFace + "\
                        " + x + "\
                        " + y + "\
                        " + z + "\
                        </div>"
                    )

                    $("#myDiv").append($html)
                }
                $("img").lazyload();
            }
        })

    </script>
</head>
<body style='background:#777'>
<div>
    <h2>face进档命中的档内的图片</h2>
    acvsid: <input type="text" name="acvsid" value="" size="20" id="input1">
    faceid: <input type="text" name="faceid" value="" size="20" id="input2">
    <input type="submit" value="Submit" id="Submit">
</div>


<div id="myDiv"></div>
</body>
</html>